<template>
  <j-page ref="page" title="云文件">
    <view class="content">
      <view class="tabs">
        <view @tap="tabIndex=1" :class="['tab',tabIndex===1&&'tab_active']">文件</view>
        <view @tap="tabIndex=2" :class="['tab',tabIndex===2&&'tab_active']">图片</view>
      </view>

      <scroll-view scroll-y="true" class="files">
        <view v-show="tabIndex===1">
        	<view class="file_item" v-for="(fileObj,index) in getFiles" :key="index">
        	  <view class="file_item_icon">
              <j-file-icon :type="fileObj.fileType"></j-file-icon>
            </view>
        	  <view class="file_item_filename">
        	    <text>{{fileObj.filename}}</text>
        	  </view>
        	</view>
        </view>
        <j-images-grid v-show="tabIndex===2" :images="getImages.map(v=>v.filePath)"></j-images-grid>
      </scroll-view>
    </view>
  </j-page>
</template>

<script>
export default {
  data() {
    return {
      tabIndex:1,
      files:[
        {
          filename:"文件名",
          fileType:"ppt",
          filePath:"/static/logo.png"
        },{
          filename:"文件名",
          fileType:"odt",
          filePath:"/static/logo.png"
        },{
          filename:"文件名",
          fileType:"word",
          filePath:"/static/logo.png"
        },{
          filename:"文件名",
          fileType:"visio",
          filePath:"/static/logo.png"
        },{
          filename:"文件名",
          fileType:"xsl",
          filePath:"/static/logo.png"
        },{
          filename:"文件名",
          fileType:"image",
          filePath:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg1.gtimg.com%2Fcomic%2Fpics%2Fhv1%2F63%2F154%2F2127%2F138347508.jpg&refer=http%3A%2F%2Fimg1.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1612538881&t=445c0bdac697f358abd8c7b6f8e709ab"
        },{
          filename:"文件名",
          fileType:"image",
          filePath:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg1.gtimg.com%2Fcomic%2Fpics%2Fhv1%2F63%2F154%2F2127%2F138347508.jpg&refer=http%3A%2F%2Fimg1.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1612538881&t=445c0bdac697f358abd8c7b6f8e709ab"
        },{
          filename:"文件名",
          fileType:"word",
          filePath:"/static/logo.png"
        },{
          filename:"文件名",
          fileType:"xsl",
          filePath:"/static/logo.png"
        },
      ]
    }
  },
  methods:{

  },
  computed:{
    //获取文件
    getFiles(){
      return this.files.filter(v=>v.fileType!=="image")
    },
    //获取图片
    getImages(){
      return this.files.filter(v=>v.fileType==="image")
    }
  }
}
</script>

<style lang="scss" scoped>
.content{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  position: relative;
  flex-wrap: wrap;
  & .tabs{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 360rpx;
    height: 56rpx;
    border-radius: 25rpx;

    & .tab{
      height: 100%;
      width: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #eaeaeb;
      font-weight: 700;
      color: $u-content-color;

      &_active{
        background-color: #b4e1ff;
        box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 0 2px rgba(0, 0, 0, .04)
      }

      &:nth-child(1){
        border-radius: 28rpx 0 0 28rpx;
      }

      &:nth-child(2){
        border-radius:  0 28rpx 28rpx 0 ;
      }
    }
  }

  & .files{
    width: 100%;
    padding: 30rpx 30rpx 0 30rpx;
    height: calc(100% - 56rpx - 30rpx);

    & .file_item{
      display: flex;
      margin: 20rpx 0;

      &_icon{
        display: flex;
        width: 80rpx;
        height: 80rpx;
        justify-content: center;
        align-items: center;

        &>view{
          width: 70rpx;
          height: 70rpx;
          background-size: cover;
        }
      }

      &_filename{
        padding-left: 26rpx;
        display: flex;
        align-items: center;
        font-size: 32rpx;

        &>text{
          word-wrap: break-word;
        }
      }
    }

    & .image_item{
      display: flex;
    }
  }
}

</style>
